<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery circliful圆形百分比统计图</title> <style type="text/css"> .demo{width:600px; margin:40px auto 0 auto; min-height:500px;} .demo div{float:left; width:300px; margin:20px;} .demo p{line-height:42px; font-size:16px} .circliful { position: relative; } .circle-text, .circle-info, .circle-text-half, .circle-info-half { width: 100%; position: absolute; text-align: center; display: inline-block; } .circle-info, .circle-info-half { color: #999; } .circliful .fa { margin: -10px 3px 0 3px; position: relative; bottom: 4px; } </style> </head> <body> <div class="container"> <div class="demo clearfix"> <h2 class="title"><a href="#">jQuery circliful圆形百分比统计图</a></h2> <div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> <div id="myStat2" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div> <div id="myStat3" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div> <div id="myStat4" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.circliful.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#myStat').circliful(); $('#myStat2').circliful(); $('#myStat3').circliful(); $('#myStat4').circliful(); }); </script> </body></html>
评论